<!-- 项目首页 -->
<template>
    <div class="login-box">
        <div class="logo-box">
            <img src="https://sa-token.cc/logo.png" alt="logo">
        </div>
        <br>
        <h2>Sa-Sso-Pro Client 端 - 前后端分离 Vue3 对接演示</h2> <br>
        <p>当前系统：<span class="client-domain">{{ state.clientDomain }}</span></p> <br>
        <!-- ---------- 已登录视图 ---------- -->
        <div class="login-info" v-if="state.isLogin">
            <h3>账号状态</h3>
            <p>
                <b class="green">已登录</b>
                （
                <span>账号id={{ state.user.id }}</span>，
                <span>昵称={{ state.user.username }}</span>，
                <span>年龄={{ state.user.age }}</span>，
                <span>登录次数={{ state.user.loginCount }}</span>
                )
            </p>
            <h3>相关操作</h3>
            <p>
                <a :href="state.logoutUrl">跳页面注销</a>
                <a href="javascript:;" @click="logout()">使用Ajax调用API注销</a>
                <a href="javascript:;" @click="logoutByAlone()">当前应用单独注销</a>
            </p>
        </div>
        <!-- ---------- 未登录视图 ---------- -->
        <div class="un-login-info" v-else>
            <h3>账号状态</h3>
            <p>
                <b class="red">未登录</b>
            </p>
            <h3>相关操作</h3>
            <p>
                <router-link :to="state.loginUrl">直接登录</router-link>
                <a href="javascript:;" @click="getCurrInfo()">使用Ajax调用API触发登录</a>
            </p>
        </div>
        <div style="height: 200px;"></div>
    </div>
</template>

<script setup>
import {baseUrl, ajax} from './method-util.js'
import router from "../router/index.js";
import {reactive} from "vue";

const state = reactive({
    // 是否登录
    isLogin: false,
    // 用户信息 
    user: { },
    // 当前地址 
    clientDomain: location.protocol + "//" + location.host,
    // 单点登录地址
    loginUrl: '/sso-login?back=' + encodeURIComponent(location.href),
    // 单点注销地址
    logoutUrl: baseUrl + '/sso/logout?satoken=' + localStorage.satoken + '&back=' + encodeURIComponent(location.href),
})

// ---------------- 所有函数 ----------------

// 查询当前会话是否登录 
const loadInfo = function() {
    // 查询当前会话是否登录
    ajax('/getCurrInfo', {}, function (res) {
        console.log('/isLogin 返回数据：', res);
        if(res.code === 200) {
            state.isLogin = true;
            state.user = res.data;
        } else if(res.code === 401){
            state.isLogin = false;
        } else {
            alert(res.msg);
        }
    })
};
loadInfo();


// 调用API触发登录 
const getCurrInfo = function() {
    ajax('/getCurrInfo', {}, function(res) {
        // 根据返回的状态码执行不同动作
        if(res.code === 200) {
            alert(res.msg);
        } else if (res.code === 401){
            const confirmOk = confirm('该数据仅对登录用户开放，现在就去登录？');
            if(confirmOk) {
                router.push(state.loginUrl);
            }
        } else {
            alert(res.msg);
        }
    });
};

// 调用API进行注销 
const logout = function() {
    ajax('/sso/logout', {}, function(res) {
        // 根据返回的状态码执行不同动作
        if(res.code === 200) {
            alert('注销成功');
            setTimeout(function() {
                location.reload(true);
            }, 100);
        } else {
            alert(res.msg);
        }
    });
};

// 当前应用独自注销 
const logoutByAlone = function() {
    ajax('/sso/logoutByAlone', {}, function(res) {
        // 根据返回的状态码执行不同动作
        if(res.code === 200) {
            alert('注销成功');
            setTimeout(function() {
                location.reload(true);
            }, 100);
        } else {
            alert(res.msg);
        }
    })
};

</script>

<style scoped>
.login-box{max-width: 1000px; text-align: center; margin: 30px auto; padding: 1em;}
.client-domain{margin: 10px;}
.login-info, .un-login-info{line-height: 40px;}
.logo-box img{width: 220px; height: 220px;}
p{color: #666;}
.green{color: green;}
.red{color: red;}
a{text-decoration: none; margin-right: 10px; line-height: 20px; display: inline-block; border-bottom: 1px solid #FFF;}
a:hover{border-bottom: 1px solid blue;}
h3{margin-top: 20px; margin-bottom: 0px; color: #000;}

*{margin: 0; padding: 0;}

/* loading框样式 */
/*.ajax-layer-load.layui-layer-dialog{min-width: 0px !important; background-color: rgba(0,0,0,0.85);}
.ajax-layer-load.layui-layer-dialog .layui-layer-content{padding: 10px 20px 10px 40px; color: #FFF;}
.ajax-layer-load.layui-layer-dialog .layui-layer-content .layui-layer-ico{width: 20px; height: 20px; background-size: 20px 20px; top: 12px; }*/
</style>
